<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-dialog :visible.sync="dialogTableVisible" width="40%">
      <h2 style="background-color: white;margin: 0;text-align: center">药方</h2>
      <el-table :data="tableDatas" border>
        <el-table-column prop="name" label="名称" width="150" align="center">
        </el-table-column>
        <el-table-column prop="number" label="数量" align="center">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="100" align="center">
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <el-button @click="del(scope)" slot-scope="scope">删除</el-button>
        </el-table-column>
      </el-table>
      <el-button>确认开药</el-button>
    </el-dialog>
    <el-container>
      <el-header>
        <div style="width: 80%;float: left">
          <h2 style="margin: 0;padding: 0">宠物医院医生界面</h2>
        </div>
        <div style="width: 20%;float: right; font-size: 16px;text-align: center;color: white">
          <div style="float: left">
            <span @click="openPres">暂存药方</span>
          </div>
          <div>
            <div style="color: white;height: 60px;line-height: 60px;float: right">
              <i @click="siOut" style="height: 30px;padding-top: 10px" class="el-icon-switch-button"><br>退出</i>
            </div>
            <div style="color: white;height: 60px;line-height: 60px;float: right">
              <i style="height: 30px;padding-top: 10px;margin-right: 30px" class="el-icon-s-check"><br>欢迎{{user}}</i>
            </div>
          </div>
        </div>
      </el-header>
      <el-main>
        <el-table border :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))">
          <el-table-column prop="id" label="序号" width="150">
          </el-table-column>
          <el-table-column prop="name" label="名称" width="150">
          </el-table-column>
          <el-table-column prop="number" label="数量" width="150">
          </el-table-column>
          <el-table-column prop="price" label="单价" width="150">
          </el-table-column>
          <el-table-column prop="Specifications" label="规格" width="150">
          </el-table-column>
          <el-table-column width="400">
            <template slot="header" slot-scope="scope">
              <el-input
                v-model="search"
                placeholder="输入关键字搜索"/>
            </template>
            <el-button @click="log(scope.row)" slot-scope="scope">
              开药
            </el-button>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data () {
    return {
      tableDatas: [],
      tableData: [
        {
          id: 1,
          name: '荷兰小犬二联',
          number: '100',
          price: '40',
          Specifications: '10支/每盒'
        },
        {
          id: 2,
          name: '二联血清',
          number: '100',
          price: '60',
          Specifications: '10支/每盒'
        },
        {
          id: 3,
          name: '国产六联',
          number: '100',
          price: '10',
          Specifications: '10支/每盒'
        },
        {
          id: 4,
          name: '免疫球蛋白',
          number: '100',
          price: '65',
          Specifications: '10支/每盒'
        },
        {
          id: 5,
          name: '荷兰五联苗',
          number: '100',
          price: '40',
          Specifications: '10支/每盒'
        },
        {
          id: 6,
          name: '抗犬瘟1号',
          number: '100',
          price: '10',
          Specifications: '12支/每盒'
        },
        {
          id: 7,
          name: '宠物洗眼液',
          number: '100',
          price: '10',
          Specifications: '50ml/每瓶'
        },
        {
          id: 8,
          name: '维迪康（口服）',
          number: '100',
          price: '15',
          Specifications: '12瓶/每盒'
        }
      ],
      dialogTableVisible: false,
      search: '',
      user: window.sessionStorage.user
    }
  },
  methods: {
    log (scope) {
      console.log(scope)
      this.tableDatas.push(scope)
    },
    del (scope) {
      this.tableDatas.splice(scope.$index, 1)
    },
    openPres () {
      this.dialogTableVisible = true
    },
    siOut () {
      this.$router.push({path: '/'})
    }
  }
}
</script>
<style>
.el-header {
  background-color: #167dfa;
  color: white;
  line-height: 60px;
}
.el-aside {
  color: #333;
}
</style>
